<template>
  <main class="main--">
    <home-header />
    <div class="container">
      <h1 class="title">打造互联网+智慧医疗的优质服务</h1>
      <h2 class="subtitle">我们的优势</h2>
      <div class="home--feature">
        <b-row no-gutters v-for="(item, index) in feature" :key="index">
          <b-col md="6" v-for="(it, ind) in item" :key="ind" class="p-2">
            <b-img
              :src="staticHost + it.pic"
              fluid
              alt="Responsive image"
            ></b-img>
            <div class="card-text">
              <h1>{{ it.name }}</h1>
              <p>
                {{ it.intro }}
              </p>
            </div>
          </b-col>
        </b-row>
      </div>

      <h1 class="title">部分合作单位</h1>
      <home-partner />
      <h1 class="title">核心产品案例</h1>
      <home-case />
      <home-system />
      <h1 class="title">行业资讯</h1>
      <home-product />
    </div>
  </main>
</template>

<script>
export default {
  data: () => ({
    feature: []
  }),
  async fetch() {
    const { data = [] } = await this.$http.$get(`api/home`);

    const arr = data.map(v => {
      v.pic = v.pic ? v.pic.replace("public/", "") : "";
      return v;
    });
    this.feature = Array.from(
      {
        length: Math.ceil(arr.length / 2)
      },
      (_, i) => arr.slice(i * 2, i * 2 + 2)
    );
  },
  computed: {
    staticHost() {
      return this.$store.state.staticHost;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  background: #fff;
  .size(8.21vw, 115px, padding-top);
  overflow: hidden;

  .title {
    .size(3.42vw, 48px);
    text-align: center;
    font-weight: bold;
  }

  .subtitle {
    .size(2.57vw, 36px);
    color: #858585;
    text-align: center;
    margin: min(2.07vw, 29px) 0 min(5.78vw, 81px);
  }
}
</style>
